<template>
  <div class="treeMenu" >
    <div v-for="(item,index) in treeData" :key="index">
        <div class="flex flexac li pre" @click="handleLi(item)">
            <span class="toogleIcon iconfont icon-up flex flexac" v-if="item.children"></span>
            {{item.label}}
            <span class="moreIcon iconfont icon-gengduo flex flexac"></span>
        </div>
        <treeMenu v-if="item.children&&item.show" class="sonTree" :treeData="item.children"></treeMenu>
    </div>
  </div>
</template>

<script>
export default {
  name: 'treeMenu',
  props: {
    treeData: {
      type: Array
    }
  },
  data() {
    return {
        treeArr:''
    }
  },
  created(){
      this.treeArr=this.treeData;
  },
  methods:{
      handleLi(item){
          console.log("最后一条数据")
          console.log(this.treeArr);
          console.log(this.treeArr[0])
          console.log(this.treeArr[1])
          console.log(this.treeArr[2])
          console.log(this.treeArr[3])
        
          


          return false
          
          console.log(item);
          var checkId=item.id;
          console.log('当前选中的id:'+checkId);
          var checkIdArr=(checkId+'').split('-');
          console.log('选中的数组的位置: '+checkIdArr)
          console.log('选中的数组的长度: '+checkIdArr.length)
          if(checkIdArr.length==1){
            var oneLi=checkIdArr[0]-1;
            this.treeData[oneLi].show=!this.treeData[oneLi].show;
          }else if(checkIdArr.length==2){
             var oneLi=checkIdArr[0]-1;
             var twoLi=checkIdArr[1]-1;
             console.log("二级菜单index： "+twoLi)
             console.log(oneLi)
             console.log(typeof oneLi)
             console.log(this.treeData[oneLi])
           
          }

      }
  },
  components: {

  }
}
</script>

<style rel='stylesheet/scss' lang='scss' scoped>
.sonTree {
  margin-left: 15px;
}
.toogleIcon{
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 0;
    color: #c0c4cc;
}
.moreIcon{
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 15px;
}

.treeMenu{
    .li{
        height: 38px;
        padding-left: 15px;
        .icon-up{
            font-size: 13px;
        }
    }
}
</style>
